<template>
    <div>
        <head-top></head-top>
        <el-form :model="formData" :rules="rules" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 5px" labelWidth="120px">
            <el-row style="margin-top: 20px;">
                <el-col :span="8">
                    <el-form-item label="收支类型">
                        <el-select size="mini" v-model="formData.chargeType"  @change="this.changeChargeType" placeholder="收支类型" >
                            <el-option
                                v-for="item in chargeTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="费用类型">
                        <el-select size="mini" v-model="formData.balanceTypeId" @change="blancetypeChange" placeholder="费用类型">
                            <el-option
                                v-for="item in balanceTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目类型">
                        <el-select size="mini" v-model="formData.balanceItemId" placeholder="项目类型">
                            <el-option
                                v-for="item in balanceItemList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="方式">
                        <el-select size="mini" v-model="formData.wayid" placeholder="方式">
                            <el-option
                                v-for="item in wayidList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="金额">
                        <el-input size="mini" style="" v-model="formData.charge" placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="建档日期">
                        <el-date-picker size="mini"
                                        style="width: 150px"
                                        v-model="formData.createtime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="学习截至日期"
                                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col :span="8">
                    <el-form-item label="所属校区">
                        <el-select size="mini" @change="schoolchange" v-model="formData.schoolid" placeholder="所属校区">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属老师">
                        <el-select size="mini" v-model="formData.eid" placeholder="所属老师">
                            <el-option
                                v-for="item in empsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="上课时段">
                        <el-select size="mini" v-model="formData.periodid" placeholder="上课时段">
                            <el-option
                                v-for="item in periodList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>

                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col :span="15">
                    <el-form-item label="备注">
                        <el-input style="width:400px" size="mini" v-model="formData.comments" placeholder="备注">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col offset="6" :span="10">
                    <el-button type="primary" size="mini" @click="submitForm('add')">确定无误,点击添加数据<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </el-form>


    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import {addOtherCharge} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";

    export default {
        components: {ElInput},
        data() {
            return {
                baoxianDisplay: false,
                empsList:null,
                itemList:null,
                value: '',
                formData: {
                    chargeType:'',
                    balanceTypeId:'',
                    balanceItemId:'',
                    wayid:'',
                    charge:'',
                    createtime:'',
                    schoolid:'',
                    eid:'',
                    periodid:'',
                    comments:'',
                }
            }
        }
        ,
        mounted() {
            if (this.balanceTypeList==null) {
                this.getBalanceTypes();
            }
            if(this.balanceItemList== null){
                this.getBalanceItem();
            }
            if (this.periodList== null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        }
        ,
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool','getBalanceTypes',
            'getBalanceItem']),
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            blancetypeChange(feeTypeid){
              var v=this.balanceItemList;
                this.itemList=[];
                v.forEach(item=>{
                   if(item.type==feeTypeid){
                     this.itemList.push(item);
                   }
                });
            },

            changeChargeType(key) {
                this.thisbalanceTypes = [];
                this.formData.type='';
                var list = this.balanceTypeList;
                list.forEach(item => {
                    if (item.type == key) {
                        this.thisbalanceTypes.push(item);
                    }
                })


            },
            async submitForm(formName) {
                alert(JSON.stringify(this.formData));
                try {
                    let result = await addOtherCharge({data:this.formData});
                    if (result.success == true) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {}
                    }
                } catch (err) {
                    console.log(err);
                }
            }
        }
        ,
        computed: {
            ...
                mapGetters(['periodList','empschoolMap','wayidList','schoolList', 'chargeTypeList', 'balanceTypeList', 'balanceItemStatus', 'balanceTypeList', 'balanceItemList', 'chargeWay'])
        }
        ,
    }

</script>

<style lang="less">
    @import '../style/mixin';

    .button_submit {
        text-align: center;
    }

    /*  .el-form-item__label {
          width: 120px;
          text-align: right;
      }
  */
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .el-form-item {
        margin-bottom: 5px;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
</style>
